<template>
  <view class="container">
    <view class="detail_title">
      <view>
        啊实打实大苏打
        <text class="overdue">逾期</text>
      </view>
      <view class="task_state">待分拨</view>
    </view>
    <view class="card_content">
      <view>任务发起人：<text @click="handlePhoneCall">李四</text></view>
      <view>任务板块：啊实打实</view>
      <view>场所类型：工业</view>
      <view>发布时间：234234</view>
      <view>任务时间：4564564</view>
      <view class="flex flex-shrink-0">
        <text>任务进度：</text>
        <u-line-progress
          :percentage="30"
          activeColor="#ff0000"
        ></u-line-progress
      ></view>
    </view>

    <view class="card_title">任务内容</view>
    <view class="card_content"
      >手动阀撒地方撒地方撒旦飞洒的方式爱地方手动阀手动阀阿斯蒂芬撒旦飞洒地方撒地方手动阀撒地方撒地方撒旦飞洒的方式爱地方手动阀手动阀阿斯蒂芬撒旦飞洒地方撒地方手动阀撒地方撒地方撒旦飞洒的方式爱地方手动阀手动阀阿斯蒂芬撒旦飞洒地方撒地方</view
    >
    <view class="card_title">备注</view>
    <view class="card_content">即使完成</view>
    <view class="card_title"
      >核查进度<text class="card_total">共计10条</text></view
    >
    <view class="extend_list">
      <view
        class="extend_item"
        v-for="(item, index) in 6"
        :key="index"
        @click="togoDetail(item)"
      >
        <view class="extend_title"> 啊实打实大苏打 </view>
        <view class="flex flex-evenly">
          <view class="flex-col items-center">
            <text class="task_number">2121</text>
            <text class="task_label">总数</text>
          </view>
          <view class="flex-col items-center">
            <text class="task_number">2121</text>
            <text class="task_label">已核查</text>
          </view>
          <view class="flex-col items-center">
            <text class="task_number">2121</text>
            <text class="task_label">待核查</text>
          </view>
        </view>
        <view class="flex padding-t-20">
          <text class="flex-shrink-0 placeholderClass padding-r-20"
            >复查率</text
          >
          <view class="w100">
            <u-line-progress
              :percentage="30"
              activeColor="#ff0000"
            ></u-line-progress>
          </view>
        </view>
      </view>
    </view>
		<view style="height:120rpx;"></view>
		<view class="btn">
			<view class="btn-primary">
				+任务分拨
			</view>
		</view>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const togoDetail = (item) => {
  uni.redirectTo({
    url: '/pages/checkTask/details?id='+item
  })
};

const handlePhoneCall=(item)=>{
	uni.makePhoneCall({
		phoneNumber: item
	});
}

</script>

<style scoped lang="scss">
.container {
  background: #f4f6fa;
	.btn {
		position: fixed;
		bottom: 10px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.btn-primary {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 600rpx;
			height: 60rpx;
			font-size: 28rpx;
			padding: 10rpx 26rpx;
			background: linear-gradient(88deg, #3677F7 0%, #3CCBFF 100%);
			box-shadow: 0rpx 12rpx 40rpx 2rpx rgba(54, 119, 247, 0.2);
			border-radius: 44rpx;
			opacity: 1;
			color: #fff;
		}
	}
  .card_title {
    font-weight: bold;
    font-size: 32rpx;
    color: #172641;
    padding: 20rpx 20rpx;
    .card_total {
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      padding-left: 30rpx;
    }
  }
  .extend_list {
    // width: 100%;
    // height: 218rpx;
    padding: 0 24rpx;

    .extend_item {
      padding: 24rpx 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
      border-radius: 16rpx;
      margin-top: 20rpx;
      .task_number {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
      }
      .task_label {
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
      }
      .extend_title {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20rpx;
        .overdue {
          font-size: 18rpx;
          color: #ffffff;
          padding: 4rpx 6rpx;
          background: #e63472;
          border-radius: 8rpx;
          margin-left: 10rpx;
        }
        .task_state {
          font-weight: 400;
          font-size: 24rpx;
          color: #ff0000;
        }
      }
    }
  }
  .card_content {
    padding: 20rpx 20rpx;
    background: #fff;
  }
  .detail_title {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx;
    justify-content: space-between;

    .overdue {
      font-size: 18rpx;
      color: #ffffff;
      padding: 4rpx 6rpx;
      background: #e63472;
      border-radius: 8rpx;
      margin-left: 10rpx;
    }
    .task_state {
      font-weight: 400;
      font-size: 24rpx;
      color: #ff0000;
    }
  }
}
</style>
